<template>
  <div class="Detail">
    <detail-head :bannerImg="bannerImg" @handleShow="handleClick"></detail-head>
    <div>
      <detail-nav v-if="isNav" :style="opacitys"></detail-nav>
    </div>
    <detail-list :categoryList="categoryList"></detail-list>    
    <v-fade >
      <detail-gallary slot="fade"  v-show="isGallary" @toggle="hide" :gallaryImgs="gallaryImgs"></detail-gallary>
    </v-fade>
  </div>
</template>
<script>
import { DetailModel } from "../../models/DetailModel";
const detailmodel = new DetailModel();
import DetailHead from "./components/Head";
import DetailNav from "./components/Nabar";
import DetailList from './components/DetailList';
import VFade from './components/Fade';
import DetailGallary from './components/Gallary'
export default {
  name: "Detail",
  components: {
    DetailHead,
    DetailNav,
    DetailList,
    VFade,
    DetailGallary
  },
  data() {
    return {
      bannerImg: "",
      categoryList: [],
      gallaryImgs: [],      
      isNav:false,
      isGallary:false,
      opacitys: {
        opacity: 0,
      },
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handlScroll);
    var id = this.$route.params.id;
    detailmodel.getDetail(id).then(res => {
      const { bannerImg, categoryList, gallaryImgs } = res.data.data;
      this.bannerImg = bannerImg;
      this.categoryList = categoryList;
      this.gallaryImgs = gallaryImgs;
    });
  },
  destroyed(){
    window.removeEventListener("scroll", this.handlScroll)
  },
  methods: {
    handlScroll() {
      //获取top顶端的距离
      var top = document.documentElement.scrollTop || document.body.scrollTop;
      if (top > 0) {
        this.isNav = true;
        var opacity = top / 200;
        if (opacity > 1) {
          opacity = 1;
        }
        this.opacitys.opacity = opacity;
      } 
      else {
        this.isNav = false;
      }
    },
    handleClick(){
      this.isGallary = true;
    },
    hide(){
      this.isGallary = false
    }
  }
};
</script>
<style lang="scss" scoped>
.Detail {
  height: 1800px;
}
</style>
